<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3响应式</title>
  <style>*{margin: 0;box-sizing: border-box;}</style>
</head>
<body>
  <div style="height: 100vh;display: flex;">
    <div style="border:1px solid #f00;">left</div>
    <div style="flex:1;display: flex;flex-direction: column;overflow: hidden;">
      <div style="border:1px solid #0f0;flex-shrink:0;">
        right top
        <div>asfsdfsdf</div>
        <div>asfsdfsdf</div>
        <div>asfsdfsdf</div>
        <div>asfsdfsdf</div>
      </div>
      <div style="border:1px solid #00f;flex:1;overflow-y: scroll;position: relative;">
        <div id="app"></div>
        <div style="height: 100vh;"></div>
        <div style="border:1px solid orange;height:20px;position:sticky;bottom: 0;left: 0;right: 0;">right bottom</div>
      </div>
    </div>
  </div>
  
  <!-- <script src="/dist/vue.js"></script>
  <script src="/node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
  <script>
    const { reactive, effect, ref, computed } = VueReactivity;
    // const state = reactive({ name: 'zf', age: 18, address: '上海' })
    const state = reactive([1, 2, 3])
    effect(() => {
      console.log('ok')
      // app.innerHTML = `${state.name} 今年 ${state.age} 岁了`
      // app.innerHTML = state[2]
      app.innerHTML = state
    })
    // 当effect 函数中依赖的数据发生改变时， effect会重新执行
    setTimeout(() => {
      // state.name = '回龙观'
      // state.address = '回龙观'
      // state.length = 1
      state[10] = 1
    }, 1000)

    // computed 只有取值时才会执行
  </script> -->

  <!-- <script src="/node_modules/vue/dist/vue.global.js"></script> -->
  <script src="/dist/vue.js"></script>
  <script>
    let { createApp, reactive, h } = Vue;
    let App = {
      setup() { // 返回一个渲染函数
        let state = reactive({ flag: true }); // proxy
        setTimeout(() => {
          state.flag = !state.flag;
        }, 2000)
        return () => {
          // react => createElement()
          return state.flag ?
          h('div', { style: { color: 'red' }, title: 'aaa' }, [
            h('li', {key: 'A', style: { background: 'white' }},'A' ),
            h('li', {key: 'B', style: { background: 'white' }},'B' ),

            h('li', {key: 'C', style: { background: 'white' }},'C' ),
            h('li', {key: 'D', style: { background: 'white' }},'D' ),
            h('li', {key: 'E', style: { background: 'white' }},'E' ),
            // h('li', {key: 'Q', style: { background: 'white' }},'Q' ),
            
            h('li', {key: 'F', style: { background: 'white' }},'F' ),
            h('li', {key: 'G', style: { background: 'white' }},'G' ),
          ]) :
          h('div', { style: { color: 'blue' }}, [
            h('li', {key: 'A', style: { background: 'white' }},'A' ),
            h('li', {key: 'B', style: { background: 'white' }},'B' ),

            h('li', {key: 'D', style: { background: 'white' }},'D' ),
            h('li', {key: 'E', style: { background: 'white' }},'E' ),
            h('li', {key: 'C', style: { background: 'white' }},'C' ),
            h('li', {key: 'H', style: { background: 'white' }},'H' ),

            h('li', {key: 'F', style: { background: 'white' }},'F' ),
            h('li', {key: 'G', style: { background: 'white' }},'G' ),
          ])
        }
      }
    }
    /* 组件怎么渲染的, 初始化的流程
     * vue3有两个包:
     *  1. runtime-dom:  针对浏览器平台, dom操作
     *  2. runtime-core: 核心, 渲染用
     */
    createApp(App).mount('#app')
  </script>
</body>
</html>